<template>
	<view class="content">
		<!-- <view class="mainHeader" :style="{paddingTop: titleTop + 'px'}">
			<headNav class="headWrap" :minHeight="statusBarHeight" :navTitle="navTitle">
			</headNav>
		</view> -->
		<view class="contentItem" v-for="(item,index) in list" :key="index" @click="selectUserFn(item.user_id)">
			<view class="leftItem">
				<image class="userImg" :src="item.avatar" mode="aspectFit"></image>
				<view class="text">
					<view class="name">
						{{item.nickname}}
					</view>
					<view class="num">
						{{item.qq}}
					</view>
				</view>
			</view>
			<view class="rightItem" v-if="item.is_active==1">
				当前使用
			</view>
		</view>
		<view class="contentItem" @click="linkUrl('/pages/my/addQQ')">
			<view class="leftItem">
				<image class="addIcon" src="/static/my/addIcon.png" mode="aspectFit"></image>
				<view class="addItem">
					添加账号
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navTitle: '切换账号',
				list:[]
			};
		},
		onLoad() {
			this.getAccountlistFn()
		},
		methods:{
			linkUrl(url) {
				console.log(url, "路由");
				uni.navigateTo({
					url: url,
					success: res => {
					},
					fail: () => {},
					complete: () => {},
					events: {
						// 监听新增数据成功后, 刷新当前页面数据
						refreshData: () => {
							// this.getUserInfoFn()
						}
					}
				});
			},
			// 获取账号列表
			getAccountlistFn() {
				this.$http('/v1/users/accountlist').then(res => {
					console.log(res, "获取账号列表");
					if (res.code == 0) {
						this.list = res.data;
						// this.$showToast('修改成功');
					} else {
						this.$showToast(res.msg)
					}
				})
			},
			
			// 选择用户
			selectUserFn(id){
				this.$http('/v1/users/select',{
					user_id:id
				},'POST').then(res => {
					console.log(res, "选择用户");
					if (res.code == 0) {
						this.$showToast('切换成功');
						uni.setStorageSync('token',res.data.token);
						uni.setStorageSync('userInfo',res.data.userInfo);
						this.getAccountlistFn();
					} else {
						this.$showToast(res.msg)
					}
				})
			}
		}
		
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.mainHeader {
		background-color: #fff;
	}

	.contentItem {
		@include flexLayout(center, space-between);
		@include setwh(688upx, 156upx);
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(233, 233, 233, 0.5);
		border-radius: 12rpx;
		margin: 54upx auto 22upx;
		background: #FFFFFF;
		padding-left: 42upx;
		padding-right: 32upx;
		
		.leftItem {
			@include flexLayout(center, flex-start);

			.userImg {
				@include setwh(94upx, 94upx);
				margin-right: 32upx;
				background-color: #A3A3A3;
				border-radius: 50%;
			}
			.addIcon{
				@include setwh(94upx, 94upx);
			margin-right: 32upx;
			}
			.text {
				.name {

					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: 500;
					font-size: 32rpx;
					color: #454545;
					line-height: 48rpx;
				}

				.num {
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: 500;
					font-size: 25rpx;
					color: #A3A3A3;
					line-height: 36rpx;
				}
			}

			.addItem {
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 500;
				font-size: 32rpx;
				color: #9C9C9C;
				line-height: 48rpx;
			}
		}

		.rightItem {
			font-family: SourceHanSansSC, SourceHanSansSC;
			font-weight: 500;
			font-size: 25rpx;
			color: #FF8888;
			line-height: 36rpx;
		}
	}
</style>